<template>
  <div>
    <van-nav-bar
      title="注册"
      left-text="首页"
      @click-left="onClickLeft"
    />
    <carNumber @getPlateLicense="getPlateLicense"></carNumber>
    <van-form @submit="onSubmitResg">
      <van-field
        v-model="parmes.name"
        name="姓名"
        label="姓名"
        placeholder="姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="parmes.mobile"
        name="手机号"
        label="手机号"
        type="tel"
        maxlength="11"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <van-field
        v-model="parmes.password"
        type="password"
        name="密码"
        label="密码"
        maxlength="25"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="请再次密码"
        maxlength="25"
        placeholder="密码"
        :rules="[{ required: true, validator, message: '两次密码不一致' }]"
      />
      <van-field
        readonly
        clickable
        name="picker"
        :value="parmes.distance"
        label="距离"
        placeholder="选择距离"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-field
        class="field-yzm"
        v-model="parmes.captcha"
        center
        clearable
        label="验证码"
        placeholder="请输入验证码"
      >
        <template #button>
          <img
            style="width: 82px; height: 26px"
            :src="captchaPath"
            @click="getCaptcha()"
          />
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-row gutter="20">
          <van-col span="12">
            <van-button block type="info" native-type="submit">注册</van-button>
          </van-col>
          <van-col span="12">
            <van-button block type="info" @click="login">返回登录</van-button>
          </van-col>
        </van-row>
      </div>
    </van-form>
  </div>
</template>
<script>
import carNumber from "../components/car";
import base from "../api/base";
export default {
  components: {
    carNumber,
  },
  data() {
    return {
      parmes: {
        uuid: "",
        captcha: "",
        mobile: "",
        password: "",
        name: "",
        distance: "",
        carPlateNo: "",
      },
      username: "",
      password: "",
      value: "",
      columns: ["1公里内", "5公里内", "10公里内", "20公里内"],
      showPicker: false,
      sms: "",
      captchaPath: "",
    };
  },
  mounted() {
    this.getCaptcha();
  },
  methods: {
    validator(val) {
      return val == this.parmes.password;
    },
    // 接收车牌号
    getPlateLicense(value) {
      this.parmes.carPlateNo = value;
    },
    // 获取uuid
    getUUID() {
      return "xxxxxxxx-xxxx-5xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
        return (c === "x"
          ? (Math.random() * 16) | 0
          : "r&0x3" | "0x8"
        ).toString(16);
      });
    },
    // 获取验证码
    getCaptcha() {
      this.parmes.uuid = this.getUUID();
      let qrCodeUrl = `${base.sq}/asxc/captcha.jpg?uuid=${this.parmes.uuid}`; // 要请求的接口地址
      let xhr = new XMLHttpRequest();
      xhr.open("GET", qrCodeUrl, true);
      xhr.responseType = "blob"; // 关键的一步
      let that = this;
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status == 200) {
            let blob = this.response;
            // 将blob转化为base64形式
            let reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = function () {
              let base64data = reader.result; // 这里base64data就是请求到的图片的base64码
              that.captchaPath = base64data;
            };
          }
        }
      };
      xhr.send();
    },
    // 注册
    resg() {},
    onClickLeft() {
      this.$router.push({
        name: "index",
      });
    },
    onClickRight() {},
    // 注册
    onSubmitResg() {
      this.$api.registerApi(this.parmes).then((resp) => {
        if (resp.code == 0) {
          this.$toast("注册成功");
          localStorage.setItem("token", resp.token);
          this.$router.push({
            name: "index",
          });
        } else {
          this.$toast(resp.msg);
          this.getCaptcha()
        }
      });
    },
    onConfirm(value) {
      this.parmes.distance = value;
      this.showPicker = false;
    },
    login() {
      this.$router.push({
        name: "login",
      });
    },
  },
};
</script>
